import React, { Component } from 'react'
import Header from '../../components/Header'
import {getProList} from '../../api/home'
import { Swiper, Image, Grid, AutoCenter, InfiniteScroll, PullToRefresh } from 'antd-mobile'
import './index.scss'
import { connect } from 'react-redux'
import {REQUEST_BANNER_LIST} from '../../store/types'
import ProList from '../../components/ProList'
import { ArrowDownCircleOutline } from 'antd-mobile-icons'

class index extends Component {

  // 创建一个 ref 属性
  contentRef = React.createRef()

  state = {
    proList: null, // 商品列表数据
    hasMore: true, // 是否还有更多数据
    count: 1, // 当前页码
    screenTop: 0, // 监听当前页面的滚动距离
  }

  componentDidMount(){
    // 发送异步数据请求且将请求后的结果放在全局状态中
    this.props.getBannerList()
    // 获取商品列表的数据
    // getProList().then(res => {
    //   this.setState({
    //     proList: res.data
    //   })
    // })
  }



  render() {

    const loadMore = async ()=>{
      // console.log('上拉了');
      await getProList({count: this.state.count}).then(res => {
        if(res.data.length > 0){
          // 有数据
          if(this.state.count === 1){
            this.setState({
              proList: res.data,
              count: this.state.count + 1
            })
          }else {
            this.setState({
            proList: [...this.state.proList,...res.data],
            count: this.state.count + 1
          })
          }

        }else {
          // 没有更多数据了
          this.setState({
            hasMore: false
          })
        }

      })
    }

    return (
      <div className='box'>
        <Header title='首页' />
      <div className='content' onScroll={(e)=>{
        // console.log(e.target.scrollTop);
        this.setState({
          screenTop: e.target.scrollTop
        })
      }} ref={this.contentRef}>


      {/* 下拉刷新的组件 */}
      <PullToRefresh
        pullingText='你松开试试呀'
        canReleaseText='试试就试试'
        completeText='恭喜你尝试成功'
        onRefresh={()=>{
          // 下拉了
          getProList({count: 1}).then(res => {
            this.setState({
              proList: res.data,
              count: 2,
              hasMore: true
            })
          })
        }}
        >


        {/* 轮播图布局 */}
        {this.props.bannerList && (<Swiper className='my-swiper' autoplay loop>
          {
             this.props.bannerList.map(item => {
              return (<Swiper.Item key={item.bannerid}>
                <Image src={item.img} />
              </Swiper.Item>)
            })
          }
        </Swiper>)}


        {/* 栅格布局 */}
          <Grid className='grid' columns={5} gap={16}>
            {
              this.props.navList.map(item => {
                return (<Grid.Item key={item.navid}>
                <AutoCenter >
                  <Image width={44} height='44px' src={item.imgurl} />
                  <div className='text-center'>{item.title}</div>
                </AutoCenter>
              </Grid.Item>)
              })
            }
          </Grid>

          {/* 商品展示 */}
          <ProList proList={this.state.proList} />

          {/* 上拉加载更多的方法 */}
          {/* loadMore 上拉加载的回调函数 */}
          {/* hasMore 是否还有更多的数据 */}
          <InfiniteScroll loadMore={loadMore} hasMore={this.state.hasMore} />

          {/* 下拉刷新的结束标签 */}
          </PullToRefresh>

          {/* 点击回到顶部 */}
          {this.state.screenTop > 250 && (<ArrowDownCircleOutline onClick={()=>{
            // console.log(this.contentRef);
            this.contentRef.current.scrollTop = 0
          }} className='goTop' />)}

      </div>
    </div>
    )
  }
}


export default connect((state)=>{
  return {
    bannerList: state.getIn(['home', 'bannerList']),
    navList: state.getIn(['home','navList'])
  }
},(dispatch)=>{
return {
getBannerList(){
  dispatch({type: REQUEST_BANNER_LIST})
}
}
})(index)
